<html >
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title>项圈</title>
        <link rel="stylesheet" href="../ionic-v1.3.3/css/ionic.css" />
        <script type="text/javascript" src="../ionic-v1.3.3/js/ionic.bundle.min.js" ></script>
    </head>
    <style type="text/css">
      html{font-size: 20px;}
      
      .bar-positive h4{
            background-color: #07E9A1;
            text-align: center;
            color: #fff;
            height: 2rem;
            line-height: 2rem;
            margin-top: 0;
            margin-bottom: 0;
       }
       .row{
        padding: 0;
       }
       .card img{
          height: 1rem;
          width: 1rem;
          vertical-align: middle;
          margin-right: 0.3rem;
       }
       .item{
          border:0;
      }
       .item-top{   
          font-size: 14px;
       }
       .item-top label{
        vertical-align: middle;
        line-height: 1rem;
       }
       .item-top span{
          color: #818181;
          line-height: 1rem;
          float: right;
          margin-top: 0.1rem;
       }
      .item-footer {
          text-align: center;
          padding-top: 0.5rem;
        }
      .item-footer b{
          font-size: 50px;
          font-weight: 500;
          display: block;
          border-right: 1px solid #D3D3D2;
        }
      .item-footer p{
        font-size: 14px;
        color: #778EA5;
        margin-top: 1.5rem;
      }
      .item-divider{
        background-color: #fff;
        border:0;
      }
      .card{
        margin: 0px 0px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0); 
      }
      .row-block{
        height: 0.5rem;
        background-color: #EDEDED;
      }
      em{
        color: #44D5A5;
        font-size: 24px;
        padding-right: 1rem;
      }
      span{
        color: #D4D4D4;
        font-size: 14px;
      }


    </style>
    <body>
        <ion-header-bar  class="bar-positive">
             <h4 class="title">项圈</h4>
        </ion-header-bar>

        <ion-content>
          <div class="row">
              <div class="col">
                <div class="card">
                    <div class="item item-divider item-top">
                     <img src="../img/huoyuedu.png"/>
                     <label>活跃度</label>
                     <span>历史记录 
                      <i class="icon ion-chevron-right"></i></span>
                    </div>
                    <div class="item item-divider item-footer">
                      <div class="row">
                         <div class="col">
                           <b>6</b>
                          
                            <p>今日活跃 /h</p>
                         </div>
                         <div class="col">
                            <b>6</b>
                          
                           <p>今日睡眠 /h</p>
                         </div>
                         <div class="col">
                            <b style="border:0">6</b>
                            
                            <p>卡路里 /千卡</p>
                         </div>
                      </div>
                    </div>
                </div>
              </div>
          </div>
          <!--   灰色分割线开始 -->
          <div class="row row-block"></div>
          <!--   灰色分割线结束 -->
           <div class="row">
              <div class="col">
                <div class="card">
                    <div class="item item-divider item-top">
                     <img src="../img/tongji.png"/>
                     <label>今日轨迹</label>
                     <span>查看详情 
                      <i class="icon ion-chevron-right"></i></span>
                    </div>
                    <div class="item item-divider ">
                      <div class="row" style="background-color: #ccc;height: 4rem ">
                          
                      </div>
                    </div>
                </div>
              </div>
          </div>
          <!--   灰色分割线开始 -->
          <div class="row row-block"></div>
          <!--   灰色分割线结束 -->
          <div class="row">
            <div class="col">
               <div class="card">
                    <div class="item item-divider item-top">
                     <img src="../img/jiankangzhuangkuang.png"/>
                     <label>健康状况</label>
                    </div>
                    <div class="item item-divider ">
                      <div class="row">
                          <div class="col">
                            <em>健康</em>
                            <span> <img src="../img/yishneng.png"/>： 玩够了，适当休息休息吧！</span>
                          </div>
                      </div>
                    </div>
                </div>
            </div>
          </div>
          <!--   灰色分割线开始 -->
          <div class="row row-block"></div>
          <!--   灰色分割线结束 -->
          <div class="row">
              <div class="col">
                <div class="card">
                    <div class="item item-divider item-top">
                     <img src="../img/dianziweilan.png"/>
                     <label>电子围栏</label>
                     <span>20m²
                      <i class="icon ion-chevron-right"></i></span>
                    </div>
                    <div class="item item-divider ">
                      <div class="row" style="background-color: #ccc;height: 4rem ">
                          
                      </div>
                    </div>
                </div>
              </div>
          </div>
        </ion-content>

    
  </body>
</html>
